<!-- 否决指标法组件 -->
<template>
  <div class="wrap">
    <div class="wrap-header">
      <span class="wrap-header-title">否决指标维度</span>
    </div>

    <div>
      <div class="wrap-header">
        <div class="wrap-header-title">维度考核工具：否决指标法（0-1）</div>
      </div>
      <div>
        <a-table
          :columns="extraColumns"
          ref="tableRef"
          :data="rejectData.extraData"
          :bordered="{ headerCell: true }"
          stripe
        >
          <template #optional="{ record, rowIndex }">
            <a-tooltip content="编辑">
              <icon-font
                type="icon-edit"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer'
                }"
                @click="addExtra(record, rowIndex)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="delExtra(record, rowIndex)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    marginRight: '10px',
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </template>
        </a-table>
        <a-button type="text" @click="addExtra(null)">新增指标</a-button>
      </div>
    </div>
  </div>
  <ExtraDrawer
    v-model:visible="extraVisible"
    @extraIndexEmit="extraIndexEmit"
    :data="currExtraData"
  ></ExtraDrawer>
</template>

<script lang="ts" setup>
import { DelProbationTemplateTool } from '@/apis/management/performance/baseSetting/template';
import ExtraDrawer from './ExtraDrawer.vue';

const props = withDefaults(
  defineProps<{
    weight?: any; // 维度权重,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'kpiIndexEmit']);

const rejectData = reactive({
  /* 
    name: '', // 指标名称
    definition: '', // 指标定义
    define: '', // 项目界定
    rule: '', // 评分标准/规则
    dataSource: undefined, // 数据来源，评分人
    dimensionaId: undefined, // 纬度id
    goal: undefined, // 考核目标值
    remark: '', // 备注
    isAddStore: false // 是否新增到指标库
  */
  extraData: []
});

let currExtraData = ref(); // 储存当前的加减分指标,

// 加减分项字段
const extraColumns = reactive([
  {
    title: '序号',
    render: ({ rowIndex }: { rowIndex: number }) => rowIndex + 1,
    width: 80
  },
  {
    title: '指标名称',
    dataIndex: 'name',
    width: 100
  },
  {
    title: '指标定义',
    dataIndex: 'definition',
    width: 100
  },
  {
    title: '项目界定',
    dataIndex: 'define',
    width: 200
  },
  {
    title: '评分标准/规则',
    dataIndex: 'rule',
    width: 200
  },
  {
    title: '考核目标值',
    dataIndex: 'source',
    width: 100
  },
  {
    title: '评分人',
    dataIndex: 'dataSource',
    width: 100
  },
  {
    title: '操作',
    width: 150,
    fixed: 'right',
    slotName: 'optional'
  }
]);
let extraVisible = ref(false); // 新增kpi弹出框
let currExtraIndex = ref(-1); // 储存加减分index
// 新增/编辑指标
const addExtra = (record: any, index?: number) => {
  if (index !== undefined) currExtraIndex.value = index;
  else currExtraIndex.value = -1;
  if (record) currExtraData.value = record;
  extraVisible.value = true;
};

// 删除加减分标
const delExtra = async (record: any, index: number) => {
  if (record.id) {
    await DelProbationTemplateTool({
      id: record.id,
      tool: 6
    });
    rejectData.extraData.splice(index, 1);
  } else {
    rejectData.extraData.splice(index, 1);
  }
  //
};

// kpi加减分弹出框自定义事件
const extraIndexEmit = (record: any, flag?: boolean) => {
  if (flag) rejectData.extraData.push(record);
  else {
    if (currExtraIndex.value !== -1)
      rejectData.extraData[currExtraIndex.value] = record;
    else rejectData.extraData.push(record);
    currExtraIndex.value = -1;
  }
};
defineExpose({ rejectData });
</script>

<style scoped lang="less">
.wrap {
  width: 100%;
  .wrap-header {
    position: relative;
    // width: 100%;
    height: 50px;
    border-radius: 3px;
    background-color: rgb(var(--primary-10));
    line-height: 50px;
    padding: 0 10px;
    margin-bottom: 10px;
  }
  .wrap-header::before {
    display: inline-block;
    content: '';
    width: 5px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #165dff;
  }
  .wrap-header-title {
    margin-left: 10px;
  }
  .wrap-header-title::before {
    content: '*';
    display: inline-block;
    color: red;
  }
  .header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    border-radius: 3px;
    background-color: rgb(var(--primary-10));
    line-height: 50px;
    margin-bottom: 10px;
  }
  :deep(.arco-form-item-label-required-symbol) {
    position: relative;
    top: 35px;
  }
}
</style>
